<template>
  <div>
    <!-- <h4>
        {{'$' + price + '.00' }}
    </h4>

    <h4>
        {{'$' + price + '.00' }}
    </h4>

    <h4>
        {{'$' + price + '.00' }}
    </h4>

    <h4>
        {{'$' + price + '.00' }}
    </h4>
    
    <h4>
        {{'$' + price + '.00' }}
    </h4> -->

    <!-- <h3>
        {{ fn() }}
    </h3>

    <h3>
        {{ fn() }}
    </h3>

    <h3>
        {{ fn() }}
    </h3>
    <h3>
        {{ fn() }}
    </h3>
    <h3>
        {{ fn() }}
    </h3> -->

    <h2>
        {{  newPrice }}
    </h2>

    <h2>
        {{  newPrice }}
    </h2>

    <h2>
        {{  newPrice }}
    </h2>

    <h2>
        {{  newPrice }}
    </h2>

    <h2>
        {{  newPrice }}
    </h2>
    
    <input v-model="price" type="text">
  </div>
</template>

<script>
// 计算属性   缓存     当依赖的值发生改变以后会重新进行计算
export default {
    name: "computed-com",
    data() {
        return {
            price: 100
        }
    },
    computed: {
        newPrice() {
            console.log('函数执行了, 计算属性')
            return '￥' + this.price + '.00'
        }
    },
    methods: {
        fn() {
            console.log('函数执行了')
            return '$' + this.price + '.00'
        }
    }
}
</script>

<style>

</style>